<template>
	<view class="car_fix_map">
		<map style="width: 100%;height: 100%;" :latitude="latitude" :longitude="longitude"
		:markers="markers" @callouttap="markertap"></map>
	</view>
	
	
	<view class="car_fix_info">
		<!-- 门店名字和距离 -->
		<view class="car_fix_name">
			<view style="font-weight: 800;">伟业汽车维修厂(人民路店)</view>
			<view style="color: #0055ff;">44m</view>
		</view>
		<!-- 门店信息 -->
		<view class="car_fix_info_detail">
			<!-- 评分和营业时间 -->
			<view class="scoreAndtime">
				<!-- 评分 -->
				<view>
								<uni-rate style="display: inline-block;" :touchable="false" :value="score" size="22" @change="onChange" />
								<text>&nbsp;&nbsp;&nbsp;{{score}}分</text>
				</view>
				<!-- 营业时间 -->
				<view>营业时间:周一至周五 09:00-22:00</view>
				<!-- 地址 -->
				<view>山阳区人民中路32号</view>
			</view>
			<!--图片 -->
			<view class="img">
				<img style="width:100%;height: 100%;" src="https://i3.3conline.com/images/piclib/201003/05/batch/1/56233/1267723169949451105fdl4.jpg" alt="" />
			</view>
		</view>
	
		<!-- 联系门店和立即预定 -->
		<view class="button">
			<button>联系门店</button>
			<button>立即预定</button>
		</view>
	</view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import '@/utils/qqmap-wx-jssdk.min.js'
// import fuiIcon from "@/components/firstui/firstui/fui-icon/fui-icon.vue"
import fuiIcon from "@/component/firstui/firstui/fui-icon/fui-icon.vue"
import uniRate from "@/uni_modules/uni-rate/components/uni-rate/uni-rate.vue"
	// 引入SDK核心类
	const QQMapWX = require('../../../utils/qqmap-wx-jssdk.min.js');
	// 实例化API核心类
	var qqmapsdk = new QQMapWX({
	    key: 'OEFBZ-QSF63-LPX3K-O4WZP-LGPKO-2BFZQ' // 必填
	});
	let latitude=ref("");
	let longitude=ref("");
	let markers=ref([])
	let score = ref("4");
	
	
	onMounted(()=>{
		
		//获取当前的位置
		uni.getLocation({
			type: 'wgs84',
			success: function (res) {
				console.log('当前位置的经度：' + res.longitude);
				console.log('当前位置的纬度：' + res.latitude);
				latitude.value=res.latitude;
				longitude.value=res.longitude;
			
				markers.value.push({
					title:"我的位置",
										id:0,
										latitude:latitude.value,
										longitude:longitude.value,
										width:20,
										height:20,
										callout: {
										  content: '附近门店',      // 气泡内容
										  color: '#FFFFFF',        // 文字颜色
										  bgColor: '#E54D42',      // 背景颜色
										  padding: 12,             // 内边距
										  borderRadius: 4,         // 圆角
										  display: 'ALWAYS',       // 常显模式
										  textAlign: 'center'
										  // 文字对齐
										  
										}
				})
				
			}
		});
		
		// // 开始搜索门店
		// qqmapsdk.search({
		// 	keyword:'酒店',
		// 	success:(res)=>{
		// 		console.log(res)
		// 		const test=ref([]);
		// 	test.value.push({
		// 		title:"我的位置",
		// 							id:0,
		// 							latitude:latitude.value,
		// 							longitude:longitude.value,
		// 							width:20,
		// 							height:20,
		// 							callout: {
		// 							  content: '附近门店',      // 气泡内容
		// 							  color: '#FFFFFF',        // 文字颜色
		// 							  bgColor: '#E54D42',      // 背景颜色
		// 							  padding: 12,             // 内边距
		// 							  borderRadius: 4,         // 圆角
		// 							  display: 'ALWAYS',       // 常显模式
		// 							  textAlign: 'center'
		// 							  // 文字对齐
									  
		// 							}
		// 	})
		// 		for (var i = 0; i < res.data.length; i++) {
		// 			test.value.push({
		// 				title:res.data[i].title,
		// 				id:i+1,
		// 				latitude: res.data[i].location.lat,
		// 				longitude: res.data[i].location.lng,
		// 				width: 20,
		// 				height: 20
		// 				   //  callout: {
		// 				   //    content: '附近门店',      // 气泡内容
		// 				   //    color: '#FFFFFF',        // 文字颜色
		// 				   //    bgColor: '#E54D42',      // 背景颜色
		// 				   //    padding: 12,             // 内边距
		// 				   //    borderRadius: 4,         // 圆角
		// 				   //    display: 'ALWAYS',       // 常显模式
		// 				   //    textAlign: 'center'
		// 					  // // 文字对齐
		// 				   //  },
		// 			});
					
		// 		};
		// 		markers.value=test.value;
		// 		console.log("打印一下数据")
		// 		console.log(markers.value)
		// 	},
		// 	fail:(err)=>{
		// 		console.log(err);
		// 	},
		// 	complete:(res)=>{
		// 		console.log(res)
		// 	}
		// })
		
	})
	
	
	// 改变评分
	const onChange=()=>{
		console.log("开始改变评分")
	}
	
	
	// 点击气泡
	const markertap =(e)=>{
		console.log("点击了气泡")
		console.log(e)
		uni.navigateTo({
			//附近门店
		
			url:'/pages/gmh/nearby_stores/nearby_stores'
		})
	}
</script>

<style lang="scss" scoped>
	.car_fix_map{
		width: 100vw;
		height: 75vh;
	}
	.car_fix_info{
		width: 92vw;
		height: 23vh;
		margin-top:2vh;
		margin-left: 5vw;
		// 门店名字
		.car_fix_name{
			width: 100%;
			height: 20%;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding: 1vh 5vw 1vh 0px;
		}
		// 门店信息
		.car_fix_info_detail{
			width: 100%;
			height: 60%;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			// 评分和时间
			.scoreAndtime{
				width: 65%;
				height: 100%;
				display: flex;
				flex-wrap: wrap;
				flex-direction: column;
				justify-content: space-around;
				font-size: 14px;
			}
			// 图片
			.img{
				width: 30%;
				height: 100%;
				padding: 2vh 0px;
			}
		}
		// 联系门店和立即预定两个按钮
		.button{
			width: 100%;
			height: 20%;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding: 1vh 0px;
			button{
				width: 40vw;
				height: 3.5vh;
				border-radius: 20px;
				font-size: 13px;
				overflow: hidden;
			}
			button:nth-of-type(1){
				background-color: #ddd;
			}
			button:nth-of-type(2){
				background-color: rgba(255, 0, 0, 0.8);
				color: white;
			}
		}
	}
</style>